<template>
	<view class="content">
		<view class="bgColor">
			<view>
				<view class="game">
					<view class="wait">
						<view class="title">双鱼小游戏</view>
						<view class="more">敬请期待</view>
					</view>
					<view class="icon-game">
						<image src="/static/img/gamePic.png"></image>
						<view class="game-name">双鱼斗地主</view>
					</view>
				 </view>
			</view>
			
			<view class="myfriends">
				<view class="nav-title">
					<view style="display:flex">
						<view class="left-red"></view>
						<view class="good-friend">我的好友</view>
					</view>
					<text class="getmore">添加更多好友</text>
				</view>
				<view class="friend-list">
					<view class="_list">
						<image src="/static/img/headerPic.png"></image>
						<view class="_text">
							<view class="name">LVRIGHT</view>
							<view class="phone">133****6806</view>
						</view>
					</view>
					<view class="commit_">共享分期值</view>
				</view>
				<view class="friend-list">
					<view class="_list">
						<image src="/static/img/headerPic.png"></image>
						<view class="_text">
							<view class="name">LVRIGHT</view>
							<view class="phone">133****6806</view>
						</view>
					</view>
					<view class="commit_">共享分期值</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
	
			}
		},
		onLoad() {
	
		},
		methods: {
			//添加朋友
			addFriends:function(){
				
			}
		}
	}
</script>
<style lang="less">
	.content {
		background-color: #F5F5F5;
		.bgColor {
			.game {
				width:686rpx;
				margin:32rpx auto 44rpx;
				height:321rpx;
				padding-top:25rpx;
				padding-left:32rpx;
				background-color: #FFFFFF;
				border-radius: 18rpx;
				.wait{
					display:flex;
					font-size:28rpx;
					.title{
						color: #333333;
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						color:rgba(51,51,51,1);
					}
					.more {
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(109,114,120,1);
						margin-left:14rpx;
					}
				}
				.icon-game{
					margin-top:32rpx;
					width: auto;
					font-size: 23rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					image{
						// text-align:center;
						margin-left:6rpx;
						width: 135rpx;
						height: 135rpx;
					}
					.game-name {
						width:150rpx;
						height:44rpx;
						line-height:44rpx;
						text-align:center;
						margin-top:10rpx;
						background:rgba(0,0,0,0.04);
						border-radius:16rpx;
						font-size:23rpx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
					}
				}
			}
			
			.myfriends{
				.nav-title {
					display:flex;
					justify-content: space-between;
					padding-right:32rpx;
					padding-left:32rpx;
					margin-bottom:23rpx;
					.left-red{
						background-color: #FF5E4D;
						border-radius: 16rpx;
						width:12rpx;
						height:33rpx;
					}
					.good-friend{
						font-size:26rpx;
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						color:rgba(51,51,51,1);
						margin-left:8rpx;
					}
					.getmore{
						font-size:23rpx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(255,94,77,1);
						line-height:38rpx;
					}
				}
				.friend-list{
					width:686rpx;
					border-radius:16rpx;
					background-color: #FFFFFF;
					margin:0 auto 16rpx;
					display:flex;
					justify-content: space-between;
					padding-left:28rpx;
					._list {
						display:flex;
						margin-top:21rpx;
						image {
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
						}
						._text {
							margin-top:14rpx;
							margin-left:18rpx;
							font-size:23rpx;
							font-family:PingFangSC-Regular,PingFang SC;
							font-weight:400;
							color:rgba(51,51,51,1);
						}
					}
					.commit_ {
						margin:34rpx 33rpx 34rpx 0;
						width:150rpx;
						height:60rpx;
						line-height:60rpx;
						text-align: center;
						background:rgba(255,94,77,0.14);
						border-radius:16rpx;
						font-size:23rpx;
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						color:rgba(255,94,77,1);
					}
				}
				.shareValue{
					height: 40rpx;
					width: 140rpx;
					color: #FF5E4D;
					font-size: 26rpx;
					background-color: #FAE2E2;
					padding: 10rpx 20rpx;
					border-radius: 18rpx;
					float: right;
					margin-top: -35rpx;
					margin-right: 30rpx;
				}		
				
			}
		
		}
		
	}
</style>
